<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <link rel="stylesheet" href="/js/layui/css/layui.css" media="all">
    <!-- 标签页图标 -->
    <link rel="shortcut icon" href="/images/icon/menu_title_1.jpg" type="image/x-icon" />
</head>
<script src="/js/layui/layui.all.js" charset="utf-8"></script>
<script src="/js/jquery.js" charset="utf-8"></script>
<script src="/js/localStorage.js" charset="utf-8"></script>
<body>
    <div class="layui-form" style="margin-top: 20px;">
        <div class="layui-form-item">
            <div class="mui-input-row">
                <label class="layui-form-label"><span style="color: red;">* </span>姓名</label>
                <div class="layui-input-block">
                    <input id="name" type="text" class="layui-input" placeholder="请输入用户名">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="mui-input-row">
                <label class="layui-form-label"><span style="color: red;">* </span>账号</label>
                <div class="layui-input-block">
                    <input id="userName" type="text" class="layui-input" placeholder="请输入用户名">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="mui-input-row">
                <label class="layui-form-label"><span style="color: red;">* </span>密码</label>
                <div class="layui-input-block">
                    <input id="passWord" type="password" class="layui-input" placeholder="请输入密码">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="mui-input-row">
                <label class="layui-form-label"><span style="color: red;">* </span>确认密码</label>
                <div class="layui-input-block">
                    <input id="confirmPassWord" type="password" class="layui-input" placeholder="请输入密码">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="mui-input-row">
                <label class="layui-form-label"><span style="color: red;">* </span>邮箱</label>
                <div class="layui-input-block">
                    <input id="email" type="text" class="layui-input" placeholder="请输入邮箱">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="mui-input-row">
                <label class="layui-form-label">手机号</label>
                <div class="layui-input-block">
                    <input id="telephone" type="text" class="layui-input"
                           placeholder="请输入手机号(可不填,用于找回账号)">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="mui-input-row">
                <label class="layui-form-label">qq</label>
                <div class="layui-input-block">
                    <input id="qq" type="text" class="layui-input" placeholder="请输入qq号(可不填,用于找回账号)">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="mui-input-row">
                <label class="layui-form-label">微信号</label>
                <div class="layui-input-block">
                    <input id="weChat" type="text" class="layui-input"
                           placeholder="请输入微信号(可不填,用于找回账号)">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="mui-input-row">
                <label class="layui-form-label">地址</label>
                <div class="layui-input-block">
                    <input id="address" type="text" class="layui-input" placeholder="请输入地址">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">请选择性别</label>
            <div class="layui-input-block">
                <input type="radio" name="sex" value="-1" title="无" checked>
                <input type="radio" name="sex" value="男" title="男">
                <input type="radio" name="sex" value="女" title="女">
            </div>
        </div>

        <div class="mui-button-row">
            <button id="register" type="button" class="layui-btn layui-btn-primary" style="width: 100%;">注册</button>
        </div>
    </div>
</body>
<script>

    //注意：导航 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function () {
        var element = layui.element;
        var form = layui.form;
        form.render();
        element.init();

        //轮播
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#test1'
            , width: '100%' //设置容器宽度
            , arrow: 'always' //始终显示箭头
            //,anim: 'updown' //切换动画方式
        });
        //…
    });

    $("#register").click(function () {
        register();
    });

    function register() {
        //验证
        var userName = $('#userName').val();
        var passWord = $('#passWord').val();
        var confirmPassWord = $('#confirmPassWord').val();
        var telephone = $('#telephone').val();
        var name = $('#name').val();
        var address = $('#address').val();
        var email = $('#email').val();
        var qq = $('#qq').val();
        var weChat = $('#weChat').val();
        var sex = $('input[name="sex"]:checked').val();

        if (isBlank(name)) {
            layer.msg("请输入姓名");
            $("#name").focus();
            return;
        }
        if (isBlank(userName)) {
            layer.msg("请输入账号");
            $("#userName").focus();
            return;
        }
        if (isBlank(passWord)) {
            layer.msg("请输入密码");
            $("#passWord").focus();
            return;
        }
        if (isBlank(email)) {
            layer.msg("请输入邮箱");
            $("#email").focus();
            return;
        }
        if ('-1' == sex) {
            layer.msg("请选择性别");
            return;
        }
        if (isBlank(confirmPassWord)) {
            layer.msg("请确认密码");
            $("#confirmPassWord").focus();
            return;
        }
        if (passWord != confirmPassWord) {
            layer.msg("两次输入的密码不相同");
            $("#confirmPassWord").focus();
            return;
        }
        $.ajax(serverURL + '/user/registerUser', {
            type: "post",
            async: false,
            dataType: 'json', //服务器返回json格式数据
            data: {
                userName: userName,
                passWord: passWord,
                telephone: telephone,
                name: name,
                address: address,
                email: email,
                sex: sex,
                qq: qq,
                weChat: weChat
            },
            success: function (data) {
                if (isNotBlank(data.data)) {
                    layer.msg("注册成功");
                } else {
                    layer.msg(data.meta);
                }
            },
            error: function (e) {
                console.log(e)
            }
        });
    }
</script>
</html>